/*
 * @Description: vue项目配置
 * @Author: hmt
 * @Date: 2022-08-17 10:24:19
 * @LastEditors: hmt
 * @LastEditTime: 2024-04-10 10:56:14
 */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
  // publicPath: './', // 配置信息在本地访问
  // 服务端设置
  devServer: {
    port: 1234, // 端口
    open: true, // 启动项目后自动开启浏览器
    proxy: {
      // 请求代理转发到另外一个服务器上
      '/api': {
        target: 'http://34.96.112.217',
        pathRewrite: { '^/api': '' },
        changeOrigin: true
      }
    }
  },
  productionSourceMap: false, // 既可以减少包大小，也可以加密源码。这样打包后文件小而且别人看不到你的源码了
  css: {
    extract: isDevelopment ? false : { ignoreOrder: true },
    requireModuleExtension: true,
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },
  // 基于环境有条件地配置行为
  configureWebpack: config => {
    config.devtool = isDevelopment ? 'source-map' : undefined // 调试vue源码
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'
    })
    if (!isDevelopment) {
      // 打包代码分割
      config.optimization.splitChunks = {
        maxInitialRequests: Infinity, // 入口点的最大并行请求数，默认30
        minSize: 800 * 1024, // 生成chunk的最小体积（以bytes为单位），默认20000
        chunks: 'all', // 表明选择哪些chunk进行优化，默认async
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}` // 大于800K会自动生成一个npm文件
            }
          }
        }
      }
      // 由于elemen-plus升级到最新包后，需要配置打包文件大小，否则打包失败
      config.performance = {
        maxEntrypointSize: 10000000, // 入口起点的最大体积
        maxAssetSize: 30000000 // 生成文件的最大体积
      }
      // 代码压缩
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log'] // 生产环境自动删除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      )
      // gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 1024,
          deleteOriginalAssets: false // 删除原文件
        })
      )
    }
  },
  // 对webpack内部配置进行颗粒度的修改
  chainWebpack: config => {
    // 移除prefetch插件，避免加载多余的资源
    config.plugins.delete('prefetch')
    // 移除preload插件，避免加载多余的资源
    config.plugins.delete('preload')
    // 移除__VUE_PROD_HYDRATION_MISMATCH_DETAILS__警告
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
    // 修复HRM
    config.resolve.symlinks(true)
    // 修改网站的信息
    config.plugin('html').tap(args => {
      args[0].title = '商城' // 导航标题
      return args
    })
  }
}
